<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.slidizle.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .dowebok {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="progressbar-slider" class="dowebok slider--animated" class="dowebok slider--animated" data-slidizle>
        <ul data-slidizle-content>
            <li style="background-image: url('images/01.jpg')"></li>
            <li style="background-image: url('images/02.jpg')"></li>
            <li style="background-image: url('images/03.jpg')"></li>
        </ul>

        <div data-slidizle-next>
            <i class="fa fa-arrow-right"></i>
        </div>
        <div data-slidizle-previous>
            <i class="fa fa-arrow-left"></i>
        </div>

        <ul data-slidizle-navigation>
            <li class="slider-navigation-item" style="background-image:url('images/01.jpg')"></li>
            <li class="slider-navigation-item" style="background-image:url('images/02.jpg')"></li>
            <li class="slider-navigation-item" style="background-image:url('images/03.jpg')"></li>
        </ul>
        <div class="slider-progressbar"></div>
        <ul data-slidizle-navigation></ul>
    </div>

    <script>
        var $dowebok = $('.dowebok'),
            $progressbar = $('.slider-progressbar'),
            api = $dowebok.data('slidizle_api');

        $dowebok.slidizle({
            loop: true,
            autoPlay: true,
            timeout: 5000
        });

        $dowebok.on('slidizle.change', function (e, api) {
            $progressbar.stop().css('width', 0);
        });

        $dowebok.on('slidizle.pause', function (e, api) {
            $progressbar.stop();
        });

        $dowebok.on('slidizle.play slidizle.resume slidizle.change', function (e, api) {
            if (api.isHover()) return;
            $progressbar.animate({
                width: '100%'
            }, api.getRemainingTimeout());
        });
    </script>
</body>

</html>